<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可拖拽的环绕式照片墙 - 响应式</title>
</head>
<body>
    <style>
        :root {
            --ring-height: 600px;   /* 容器高度（默认桌面） */
            --imgwrap-size: 400px;  /* 中心正方形容器尺寸 */
            --depth: 700px;         /* 环半径（translateZ距离，越大越远） */
            --gap-top: 100px;       /* 顶部间距 */
        }

        body {
          /* background-color: #000; */
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
          background-color: #f7f7f7;
        }
      
        .ring {
          overflow: hidden;
          width: 100%;
          margin: var(--gap-top) auto 60px;
          height: var(--ring-height);
          /* 设置透视距离，使3D效果更明显 */
          perspective: 1000px;
          display: flex;
          align-items: center;
          justify-content: center;
          touch-action: none; /* 防止浏览器默认触控滚动干扰拖拽 */
        }
      
        .imgwrap {
          width: var(--imgwrap-size);
          height: var(--imgwrap-size);
          margin: 0 auto;
          position: relative;
          /* 设置元素的子元素是位于 3D 空间中 */
          transform-style: preserve-3d;
          cursor: grab;
        }

        .imgwrap:active {
          cursor: grabbing;
        }
      
        .imgwrap img {
          width: 100%;
          height: 100%;
          /* 保持图片的宽高比，正好填充满容器 */
          object-fit: cover;
          position: absolute;
          backface-visibility: hidden;
          border-radius: 10px;
          box-shadow: 0 6px 18px rgba(0,0,0,0.15);
        }

        /* 平板端（768-1199） */
        @media (max-width: 1199px) and (min-width: 768px) {
            :root {
                --ring-height: 520px;
                --imgwrap-size: 340px;
                --depth: 560px;
                --gap-top: 70px;
            }
        }

        /* 移动端（<768） */
        @media (max-width: 767px) {
            :root {
                --ring-height: 420px;
                --imgwrap-size: 260px;
                --depth: 440px;
                --gap-top: 50px;
            }
            .imgwrap img { border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
        }

        /* 超小屏（<480） */
        @media (max-width: 480px) {
            :root {
                --ring-height: 360px;
                --imgwrap-size: 220px;
                --depth: 360px;
                --gap-top: 30px;
            }
        }

        /* 横屏优化（矮屏） */
        @media (orientation: landscape) and (max-height: 500px) {
            :root {
                --ring-height: 320px;
                --imgwrap-size: 220px;
                --depth: 340px;
                --gap-top: 20px;
            }
        }

        /* 深色模式适配 */
        @media (prefers-color-scheme: dark) {
            body { background-color: #111; }
            .imgwrap img { box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
        }
      </style>
      <div class="ring">
        <div class="imgwrap">
          <img src="/src/img/grid/01.png" />
          <img src="/src/img/grid//02.png" />
          <img src="/src/img/grid//03.png" />
          <img src="/src/img/grid//04.png" />
          <img src="/src/img/grid//05.png" />
          <img src="/src/img/grid//06.png" />
          <img src="/src/img/grid//07.png" />
          <img src="/src/img/grid//08.png" />
          <img src="/src/img/grid//09.png" />
          <img src="/src/img/grid//10.png" />
        </div>
      </div>
      <script>
        // 获取所有图片
        let items = document.querySelectorAll(".ring img");
        // 得到图片的总个数
        const length = items.length;

        // 读取CSS变量的工具函数（返回数字像素值）
        function readCssPx(varName, el = document.documentElement) {
          const val = getComputedStyle(el).getPropertyValue(varName).trim();
          return parseFloat(val.replace('px','')) || 0;
        }

        // 根据当前断点设置 translateZ 深度，并设置每个 item 的初始 transform
        function layoutImages() {
          const depth = readCssPx('--depth');
          items.forEach((item, index) => {
            let angleForItem = (360 / length) * index + "deg";
            item.style.transform = `rotateY(${angleForItem}) translateZ(-${depth}px)`;
          });
        }
      
        // 环形元素的初始旋转角度
        let angle = 0;
        // 环形元素新的角度值
        let newAngle = 0;
        // 获取放置图片的容器
        let imgWrap = document.querySelector(".imgwrap");
        // 获取最外层容器
        let ring = document.querySelector(".ring");

        // 初始化布局
        layoutImages();
        imgWrap.style.transform = `rotateY(${newAngle}deg)`;

        // 监听窗口尺寸变化，重新布局
        window.addEventListener('resize', () => {
          layoutImages();
          imgWrap.style.transform = `rotateY(${newAngle}deg)`;
        });
      
        // 统一的开始/移动/结束处理，兼容鼠标与触屏
        let isDragging = false;
        let startX = 0;

        function onPointerDown(clientX) {
          isDragging = true;
          startX = clientX;
        }

        function onPointerMove(clientX) {
          if (!isDragging) return;
          // 圆的半径由 --depth 决定
          const r = readCssPx('--depth');
          const circumference = 2 * Math.PI * r;
          let moveX = clientX - startX;
          newAngle = parseInt(angle - (moveX / circumference) * 360);
          imgWrap.style.transform = `rotateY(${newAngle}deg)`;
        }

        function onPointerUp() {
          if (!isDragging) return;
          isDragging = false;
          angle = newAngle;
        }

        // 鼠标事件
        ring.addEventListener("mousedown", function (e) {
          e.preventDefault();
          onPointerDown(e.clientX);
          function mousemoveHandler(e2) { onPointerMove(e2.clientX); }
          function mouseupHandler() {
            onPointerUp();
            document.removeEventListener("mousemove", mousemoveHandler);
            document.removeEventListener("mouseup", mouseupHandler);
          }
          document.addEventListener("mousemove", mousemoveHandler);
          document.addEventListener("mouseup", mouseupHandler);
        });

        // 触控事件
        ring.addEventListener('touchstart', function(e){
          if (!e.touches || e.touches.length === 0) return;
          onPointerDown(e.touches[0].clientX);
        }, {passive: true});

        ring.addEventListener('touchmove', function(e){
          if (!e.touches || e.touches.length === 0) return;
          e.preventDefault();
          onPointerMove(e.touches[0].clientX);
        }, {passive: false});

        ring.addEventListener('touchend', function(){
          onPointerUp();
        }, {passive: true});
      </script>
</body>
</html>